<template>
  <div>
    <h1>登录</h1>

    <van-cell-group>
      <van-field clearable v-model="tel" label="" placeholder="手机号">
        <span slot="text">如何获取</span>
      </van-field>

      <van-field
        center
        clearable
        v-model="verify"
        label="验证码"
        placeholder=""
      >
        <van-button slot="button" @click="yan()" type="primary" size="middle" plain>
          获取验证码
        </van-button>
      </van-field>
      <!--      <van-button @click="login()" type="primary" block>登录</van-button>-->
      <van-button @click="login()" round type="info">登录</van-button>
    </van-cell-group>

    <div style="margin-top: 550px;">
      <van-row type="flex" justify="space-around">
        <van-col @click="registerLogin()" span="6">还没账号我要注册...</van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      tel: '', // 定义sms变量
      verify: null // 定义verify变量
    }
  },
  methods: {
    yan() {
      axios.get(`login/JWTTest/send?tel=${this.tel}`).then(res => {
        if (res.data.code == 200) {
          this.$message.success('发送成功')
        } else {
          this.$message.error('发送失败')
        }
      })

    },
    registerLogin() {
      this.$router.push('/register')
    },
    login() {
      axios.post(`login/login/tologin?tel=${this.tel}&verify=${this.verify}`).then(res => {
        if (res.data.code == 200) {
          localStorage.setItem('login', JSON.stringify(res.data.data.tel));
          this.$message.success('登录成功')
          this.$router.push('/shouye')
        } else {
          this.$message.error('登录失败')
        }
      })
    }
  },
  mounted() {

  }
}
</script>
